<%--
  Created by IntelliJ IDEA.
  User: Han Fuhao
  Date: 2023/5/15
  Time: 0:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> RMS | 主页 </title>
    <link href="${pageContext.request.contextPath}/static/css/reset.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/login.css?1" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/index.css" rel="stylesheet">

    <link href="https://cdn.bootcdn.net/ajax/libs/layui/2.7.6/css/layui.css" rel="stylesheet">
<body>
<div id="myModal" style="display: none;">
    <form id="uploadForm" method="post">
        <ul class="qt-login-ul">
            <li>
                <p class="title" style="width: 100px"> 姓名：</p> <input type="text" name="updateName" class="qt-input"
                                                                        id="updateName"
                                                                        placeholder="请输入姓名">
            </li>
            <li>
                <p class="title" style="width: 100px"> 性别：</p>
                <select class="qt-input" name="updateSex" id="sex">
                    <option value="">请选择</option>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </li>
            <li>
                <p class="title" style="width: 100px"> 出生日期：</p>
                <input type="text" name="updateBirthday" class="qt-input" id="birthday" placeholder="请输入出生日期">
            </li>
            <li>
                <p class="title" style="width: 100px"> 身份证号：</p>
                <input type="text" name="updateIdCard" class="qt-input" id="idCard" placeholder="请输入身份证号">
            </li>
            <li>
                <p class="title" style="width: 100px"> 政治面貌：</p>
                <select class="qt-input" name="updateFeature" id="feature">
                    <option value="">请选择</option>
                    <option value="1">团员</option>
                    <option value="2">党员</option>
                    <option value="3">群众</option>
                </select>
            </li>
            <li>
                <p class="title" style="width: 100px"> 准考证号：</p> <input type="text" name="updateAdmissionNumber"
                                                                            class="qt-input" id="admissionNumber"
                                                                            placeholder="请输入准考证号">
            </li>
            <li>
                <p class="title" style="width: 100px"> 成绩：</p> <input type="text" name="updateGrade" class="qt-input"
                                                                        id="grade"
                                                                        placeholder="请输入成绩">
            </li>
            <li>
                <p class="title" style="width: 100px"> 毕业学校：</p> <input type="text" name="updateSchool"
                                                                            class="qt-input" id="school"
                                                                            placeholder="请输入毕业学校">
            </li>
            <li>
                <p class="title" style="width: 100px"> 手机号码：</p> <input type="text" name="updatePhone"
                                                                            class="qt-input" id="phone"
                                                                            placeholder="请输入联系电话">
            </li>
            <li>
                <p class="title" style="width: 100px"> 家庭住址：</p> <input type="text" name="updateAddress"
                                                                            class="qt-input" id="address"
                                                                            placeholder="请输入地址">
            </li>
            <li>
                <p class="title" style="width: 89px"> 照片：</p>
                <img src="" width="100px" height="100px" style="margin-left: 3px"><br>
                <input type="file" name="file" id="upload">
            </li>
        </ul>
    </form>
</div>
<div class="qt-base-wrap">
    <div class="qt-base-header">
        <div class="qt-base-headerWrap fn-clear">
            <div class="qt-loginImg">
                新生报道登记系统
            </div>
            <ul>
                <li>${sessionUser.name}</li>
                <li>退出</li>
            </ul>
        </div>
    </div>
    <main>
        <div class="">
            <form class="search">
                <ul class="qt-login-ul">
                    <li>
                        <p class="title"> 用户名：</p> <input type="text" name="userName" class="qt-input"
                                                             placeholder="请输入用户名">
                    </li>
                    <li>
                        <p class="title"> 联系电话：</p> <input type="text" name="phone" class="qt-input"
                                                               placeholder="请输入联系电话：">
                    </li>
                    <li>
                        <p class="title"> 性别：</p>
                        <select class="qt-input" name="sex" style="height: 40px">
                            <option value="">请选择</option>
                            <option value="1">男</option>
                            <option value="0">女</option>
                        </select>
                    </li>
                    <li>
                        <button class="qt-loginbtn" id="loginbtn" type="button"
                                onclick="selectStudentForPages(1, 0, 10)">查询
                        </button>
                    </li>
                </ul>

            </form>
        </div>
        <table class="gridtable">
            <thead>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>本人手机号码</th>
            <th>家庭住址</th>
            <th>毕业院校</th>
            <th>准考证号</th>
            <th>政治面貌</th>
            <th>操作</th>
            </thead>
            <tbody id="tBody">

            </tbody>
        </table>
        <div id="demo-laypage-all"></div>
    </main>
    <div class="qt-login-fonter">
        <p>Copyright © 2023 All Rights Reserved　版权所有 思维空间</p>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.7.6/layui.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">

    selectStudentForPages(1, 0, 10);

    function selectStudentForPages(curr, pageNo, pageSize) {
        const name = $("input[name='userName']").val().trim();
        const phone = $("input[name='phone']").val().trim();
        const sex = $("select[name='sex']").val().trim();
        $.ajax({
            url: 'student/getStudent',
            data: {
                name: name,
                phone: phone,
                sex: sex,
                pageNo: pageNo,
                pageSize: pageSize
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                let htmlStr = "";
                $.each(data.students, function (index, obj) {
                    htmlStr += "<tr>";
                    htmlStr += "<td>" + obj.studentId + "</td>";
                    htmlStr += "<td>" + obj.studentName + "</td>";
                    htmlStr += "<td>" + obj.sex + "</td>";
                    htmlStr += "<td>" + obj.phoneNumber + "</td>";
                    htmlStr += "<td>" + obj.address + "</td>";
                    htmlStr += "<td>" + obj.school + "</td>";
                    htmlStr += "<td>" + obj.admissionNumber + "</td>";
                    htmlStr += "<td>" + obj.feature + "</td>";
                    htmlStr += "<td><span name='update' class='opt' onclick='getRowData(this)'>编辑</span>&nbsp&nbsp<span class='opt' onclick='delStudent(this)'>删除</span></td>";
                    htmlStr += "</tr>";
                });

                $("#tBody").html(htmlStr);

                layui.use(function () {
                    var laypage = layui.laypage;
                    laypage.render({
                        elem: 'demo-laypage-all',
                        count: data.count,
                        limit: pageSize,
                        curr: curr,
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                        jump: function (obj, first) {
                            if (!first) {
                                selectStudentForPages(obj.curr, (obj.curr - 1) * obj.limit, obj.limit);
                            }
                        }
                    });
                });
            }
        })
    }

    function getRowData(element) {
        var $row = $(element).closest("tr");
        var firstColumnData = $row.find("td:first-child").text();
        const name = "";
        var sex = "";
        var birthday = "";
        var idCard = "";
        var admissionNumber = "";
        var feature = "";
        var grade = "";
        var school = "";
        var phoneNumber = "";
        var address = "";
        var selectedFile = null;
        layer.open({
            type: 1,
            title: '编辑学生信息',
            content: $('#myModal').html(),
            area: ['800px', '600px'],
            success: function () {
                $.ajax({
                    url: '/student/getStudentByStuId',
                    data: {
                        stuId: firstColumnData
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        $("input[name='updateName']").val(data.name).prop("readonly", true);
                        $("select[name='updateSex']").val(data.sex);
                        $("input[name='updateBirthday']").val(data.birthday);
                        $("input[name='updateIdCard']").val(data.idCard);
                        $("input[name='updateAdmissionNumber']").val(data.admissionNumber);
                        $("select[name='updateFeature']").val(data.feature);
                        $("input[name='updateGrade']").val(data.grade);
                        $("input[name='updateSchool']").val(data.school);
                        $("input[name='updatePhone']").val(data.phoneNumber);
                        $("input[name='updateAddress']").val(data.address);
                        $("img").attr("src", "/UpLoadFile/" + data.photoPath + ".jpg");

                        sex = data.sex;
                        birthday = data.birthday;
                        idCard = data.idCard
                        admissionNumber = data.admissionNumber;
                        feature = data.feature;
                        grade = data.grade;
                        school = data.school;
                        phoneNumber = data.phoneNumber;
                        address = data.address;
                    }
                })

                $(function () {
                    $("select[name='updateSex']").on("change", function () {
                        sex = $(this).val().trim();
                    });
                    $("input[name='updateBirthday']").on("change", function () {
                        birthday = $(this).val().trim();
                    });
                    $("input[name='updateIdCard']").on("change", function () {
                        idCard = $(this).val().trim();
                    });
                    $("input[name='updateAdmissionNumber']").on("change", function () {
                        admissionNumber = $(this).val().trim();
                    });
                    $("select[name='updateFeature']").on("change", function () {
                        feature = $(this).val().trim();
                    });
                    $("input[name='updateGrade']").on("change", function () {
                        grade = $(this).val().trim();
                    });
                    $("input[name='updateSchool']").on("change", function () {
                        school = $(this).val().trim();
                    });
                    $("input[name='updatePhone']").on("change", function () {
                        phoneNumber = $(this).val().trim();
                    });
                    $("input[name='updateAddress']").on("change", function () {
                        address = $(this).val().trim();
                    });
                    $("input[name='file']").on("change", function(){
                        console.log($(this));
                        selectedFile = $(this)[0].files[0];
                        console.log(selectedFile);
                    });
                });
            },
            btn: ['确认', "确认更换照片", '取消'],
            yes: function (index) {
                if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(phoneNumber)){
                  layer.msg('请输入正确格式电话号码');
                  return;
                }

                if(!/^\d{15}|\d{18}$/.test(idCard)){
                  layer.msg('请输入正确格式身份证号码');
                  return;
                }
                if (!/^[0-9]*$/.test(admissionNumber)){
                  layer.msg('请输入正确格式准考证号');
                  return;
                }
                if (!/^[0-9]*$/.test(grade)){
                  layer.msg('请输入正确格式成绩');
                  return;
                }

                const stu = {
                    name: name,
                    sex: sex,
                    birthday: birthday,
                    phoneNumber: phoneNumber,
                    idCard: idCard,
                    admissionNumber: admissionNumber,
                    grade: grade,
                    school: school,
                    feature: feature,
                    address: address
                };

                $.ajax({
                    url: '/student/updateStudent',
                    data: JSON.stringify(stu),
                    type: 'POST',
                    processData: false,
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (data) {
                        layer.msg(data.msg);
                        if (data.code === '0') {
                            layer.close(index);
                            window.location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                    }
                });
                return false;
            },
            btn2: function (index) {
                if (selectedFile != null) {
                    var data = new FormData();
                    data.append('file', selectedFile);
                    console.log(data);
                    $.ajax({
                        type: 'POST',
                        url: "/student/updateStudentImg",
                        data: data,
                        cache: false,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            if (data.code === '0'){
                                $.ajax({
                                    type: "POST",
                                    url: "/student/updateImgToStudent",
                                    data: JSON.stringify(firstColumnData),
                                    contentType: "application/json",
                                    processData: false,
                                    success: function (){
                                        layer.msg(data.msg);
                                    }
                                })
                            }
                            layer.msg('上传失败！');
                        }
                    });
                }
                return false;
            },
        });
    }

    function delStudent(element) {
        var $row = $(element).closest("tr");
        var firstColumnData = $row.find("td:first-child").text();
        layer.confirm('确定要删除编号为' + firstColumnData + '学生？', {icon: 3}, function(){
            $.ajax({
                type: "POST",
                url: "/student/delStudent",
                data: JSON.stringify(firstColumnData),
                contentType: "application/json",
                processData: false,
                success: function (data){
                    if (data.code === '0'){
                        layer.msg(data.msg, {icon: 1});
                        window.location.reload();
                    }else {
                        layer.msg(data.msg);
                    }
                }
            })
        }, function(){
        });
    }
</script>
</body>
</html>

